// blue
@primary-blue: hsl(202, 96%, 37%);
@link-blue: hsl(202, 96%, 28%);
@mid-blue: hsl(204, 70%, 53%);
@mid-blue-highlight: hsl(204, 64%, 44%);
@mid-blue-highlight-hover: hsl(204, 98%, 61%);
@dark-blue: hsl(210, 100%, 20%);
@darker-brand-blue: hsl(198, 100%, 36%);
@header-nav-hover-color: hsl(207, 83%, 33%);
@navy-blue: hsl(224, 83%, 23%); // one usage
@blue-b0bed9: hsl(220, 35%, 77%);
@grey-blue:hsl(211, 37%, 89%);
@pale-blue:hsl(212, 100%, 95%);
@teal: hsl(184, 100%, 21%);
@button-hover-blue:hsl(202, 57%, 61%);
@steel-blue:hsl(210,10%,50%);
@dark-baby-blue: hsl(240, 100%, 75%);
@mid-baby-blue: hsl(240, 100%, 88%);
@baby-blue: hsl(240, 100%, 93%);
@blue-9fafd1: hsl(221, 35%, 72%);
@blue-3366ff: hsl(225, 100%, 60%);

// green
@green: hsl(130, 61%, 33%);
@green-two: hsl(128, 44%, 59%);
@green-three: hsl(130, 46%, 45%);
@green-four: hsl(130, 43%, 45%);
@green-five: hsl(130, 51%, 42%);
@mid-baby-green: hsl(120, 100%, 88%);
@baby-green: hsl(120, 100%, 93%);
@dark-green: hsl(113, 38%, 29%);
@olive: hsl(77, 45%, 38%);
@light-olive: hsl(77, 28%, 53%);
@light-olive-2: hsl(78, 34%, 63%);
@lime-green: hsl(75, 100%, 85%);

// orange
@orange: hsl(32, 100%, 61%);
@orange-two: hsl(32, 80%, 50%);
@orange-three: hsl(32, 100%, 78%);

// reds
@red: hsl(8, 78%, 53%);
@dark-red: hsl(8, 70%, 44%);
@red-two:hsl(4, 90%, 58%);

// pinks
@mid-baby-pink: hsl(0, 100%, 88%);
@baby-pink: hsl(0, 100%, 93%);
@magenta: hsl(300, 100%, 50%);

// beige
@dark-yellow: hsl(57, 60%, 72%);
@beige-two: hsl(48, 28%, 76%);
@beige-three: hsl(48, 15%, 74%);
@beige: hsl(48, 33%, 83%);
@brown: hsl(40, 32%, 29%);
@brown-3a301e: hsl(39, 32%, 17%); // this color is only used once
@light-yellow: hsl(58, 100%, 90%);
@lighter-yellow: hsl(58, 92%, 95%);
@dark-beige:hsl(64, 9%, 71%);
@light-beige:hsl(48, 29%, 93%);
@beige-two:hsl(63, 26%, 84%);
@cream: hsl(49, 30%, 93%);
@off-white: hsl(45, 100%, 98%);
@gold: hsl(50, 100%, 50%);

// greyscale
@black: hsl(0, 0%, 0%);
@dark-grey: hsl(0, 0%, 20%);
@grey-464646: hsl(0, 0%, 27%);
@darker-grey: hsl(0, 0%, 27%);
@grey-555: hsl(0, 0%, 33%);
@dark-grey-two: hsl(0, 0%, 35%);
@grey: hsl(0, 0%, 40%);
@mid-grey: hsl(0, 0%, 60%);
@light-mid-grey: hsl(0, 0%, 67%);
@light-grey: hsl(0, 0%, 80%);
@lighter-grey: hsl(0, 0%, 87%);
@grey-e7e7e7: hsl(0, 0%, 91%);
@lightest-grey: hsl(0, 0%, 93%);
@grey-f3f3f3: hsl(0, 0%, 95%);
@grey-f4f4f4: hsl(0, 0%, 96%);
@grey-fafafa: hsl(0, 0%, 98%);
@white: hsl(0, 0%, 100%);
@gray-a19b9e: hsl(330, 3%, 62%);
@gray-d1cfd0: hsl(330, 2%, 82%);

// outliers
@admin-table-border: hsl(48, 26%, 73%);
@heart-color: hsl(358, 100%, 74%);
@blue: hsl(240, 100%, 50%);
@purple: hsl(283, 97%, 61%);

// book cover carousel component
@book-cover-carousel-background: hsl(47, 54%, 90%);
@book-cover-carousel-border-top: hsl(51, 32%, 88%);
@book-cover-carousel-border-bottom: hsl(50, 32%, 85%);

// book cover
@book-cover-shadow-color: hsl(48, 35%, 64%);

// nagios
@nagios-grey: hsl(0, 0%, 67%);
@nagios-green: hsl(108, 100%, 50%);
@nagios-orange: hsl(36, 100%, 50%);
@nagios-yellow: hsl(60, 100%, 50%);
@nagios-red: hsl(0, 93%, 60%);

// modal
@modal-background-color: hsl(0, 0%, 100%);
@modal-header-background-color: hsl(0, 0%, 91%);
@modal-header-color: hsl(0, 0%, 33%);
